<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript第十九课</title>
    <script src="../JavaScript_Lesson16/js/jquery-3.4.1.min.js"></script>

</head>


<body>
    <!-- HTML结构 -->
    <!-- 绑定合适的事件处理函数，实现以下逻辑：

    当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
    
    当用户去掉“全不选”时，自动不选中所有语言；
    
    当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
    
    当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
    
    当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。 -->

    <from id="test-from" action="test">
        <legend>请选择想要学习的编程语言：</legend>
        <fieldset>
            <p>
                <label class="selectAll">
                    <input type="checkbox">
                    <span class="selectAll">
                        全选
                    </span>
                    <span class="deselectAll">
                        全不选
                    </span>
                </label>
                <a href="#0" class="invertSelect">
                    反选
                </a>
            </p>
            <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
            <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
            <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
            <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
            <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
            <p><button type="submit">Submit</button></p>
        </fieldset>
    </from>

</body>
<script src="js/js.js"></script>
<!-- <script>
    var
        checkBox = $('.selectAll>input'),
        langs = $('[name=lang]'),
        selectAll = $('span.selectAll'),
        deselectAll = $('.deselectAll'),
        invertSelect = $('.invertSelect');
        
    $(function () {
        // 1：代表checkbox事件中调用
        // 2：代表lang事件中调用
        // 3：代表反选事件中调用

        checkBox.change(() => {
            statusMachine(1);
        })

        langs.change(() => {
            statusMachine(2);
        })

        invertSelect.click(() => {
            statusMachine(3);
        })



        statusMachine(0);
    })

    function statusMachine(from) {

        if(from===3){
            langs.map((index,item)=>{
                item.checked=!item.checked;
            })
        }

        var isBoxChecked = checkBox.prop('checked');
        console.log('当前全选or全不选状态：' + isBoxChecked);

        if (isBoxChecked) {
            if (from !== 2 && from!==3) {
                langs.prop('checked', true);
            }

        } else {
            if (from !== 2 && from!==3) {
                langs.prop('checked', false);
            }
        }

        var isSelectAll = isLangsSelectAll();
        console.log('当前语言选中状态：' + isSelectAll);

        if (isSelectAll) {
            selectAll.hide();
            deselectAll.show();
            checkBox.prop('checked',true);
        } else {
            selectAll.show();
            deselectAll.hide();
            checkBox.prop('checked',false);
        }
    }

    function isLangsSelectAll() {
        var isSelectAll = true;
        for (let i = 0; i < langs.length; i++) {
            var isChecked = $(langs[i]).prop('checked');
            // console.log(isChecked);
            if (!isChecked) {
                isSelectAll = false;
            }
        }

        return isSelectAll;
    }


</script> -->

<script>
    var checkBX = $('.selectAll>[type=checkbox]');
    var selectAll = $('span.selectAll');
    var deselectAll = $('.deselectAll');
    var invertSelect = $('.invertSelect');
    var langs = $('[name=lang]');
    
    console.log(invertSelect);
    


    $(function () {
        checkBX.change(() => {
            stm(1);
        })
        langs.change(() => {
            stm(2);
        })
        invertSelect.click(() => {
            stm(3);
        })
        stm(0);
    })

    function stm(from) {
        if (from === 3) {
            langs.map((index, item) => {
                item.checked = !item.checked;
            })
        }
        var isBoxChecked = checkBX.prop('checked');

        console.log(isBoxChecked);
        if (isBoxChecked) {
            if (from !== 2 && from !== 3) {
                langs.prop('checked', true);
            }
        } else {
            if (from !== 2 && from !== 3) {
                langs.prop('checked', false);
            }
        }
        var isSelectAll = isLangsSelectAll();
        console.log('当前语言状态' + isSelectAll);

        if (isSelectAll) {
            selectAll.hide();
            deselectAll.show();
            checkBX.prop('checked', true);
        } else {
            selectAll.show();
            deselectAll.hide();
            checkBX.prop('checked', false);

        }
    }



    function isLangsSelectAll() {
        var isSelectAll = true;
        for (var i = 0; i < langs.length; i++) {
            var isChecked = $(langs[i]).prop('checked');
            // console.log(isChecked);
            if (!isChecked) {
                isSelectAll = false;
            }
        }

        return isSelectAll;
    }



</script>

</html>